<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <tr>
        <td>照片：</td>
        <td id="img"></td>
    </tr>
    <tr>
        <td>姓名：</td>
        <td id="name"></td>
    </tr>
    <tr>
        <td>年龄：</td>
        <td id="age"></td>
    </tr>
    <tr>
        <td >好友：</td>
        <td id="friends"></td>
    </tr>
</table>
<input type="button" value="加载数据" onclick="f()">
<script>
    let nameTd=document.querySelector("#name")
    let imgTd=document.querySelector("#img")
    let ageTd=document.querySelector("#age")
    let friendsTd=document.querySelector("#friends")
    function f(){
        let p={name:"传奇哥",age:18,url:"fcq.jpg",friends:["貂蝉","武则天","孙尚香"]};
        nameTd.innerText=p.name;
        ageTd.innerText=p.age;

        friendsTd.innerText=p.friends;
        let  img=document.createElement("img");
        img.src=p.url;
        img.width=100;
        imgTd.append(img);

    }
</script>
</body>
</html>